<template>
	<view class="home clearfix ">
		<!-- <image src="/static/order/stores.png" class="stross" mode=""></image> -->
		<cu-custom bgColor="bg-transparent text-white" isBack style="background: #de2e21;">
			<block slot="content">店铺详情</block>
			<!-- <block slot="right">
				<view class="search-box px15 flex align-center justify-between" @click="pushPage('/pages/goods/search')">
					<view class="flex align-center wp100  px15">
						<image src="/static/home/seo.png" class="block15"></image>
						<text class="ml10 text-info f12">搜索商品...</text>
					</view>
				</view>
			</block> -->
		</cu-custom>
		<!-- notice -->
		<view class="business-view">
			<view class="bg-white flex flex-direction align-center pb20 mx10 por business-content">
				<view class="business-info">
					<image :src="storepic" class="block50 business-image"></image>
					<view class="text-info">
						<view class="text-info-top">
							<text class="f18" >{{storename}}</text>
							<text>等级：{{userInfo.vipName}}</text>
						</view>
						<view class="text-info-bottom">
							<text class="xing">★★★☆☆</text>
						</view>
					</view>
				</view>
				<view class="shop-info">
					<view class="">
						<view class="">{{storenum}}</view>
						<view class="">商品</view>
					</view>
					<view class="">
						<view class="">{{storegznum}}</view>
						<view class="">关注</view>
					</view>
					<view class="">
						<view class="">{{storegznum}}</view>
						<view class="">销量</view>
					</view>
					<view class="">
						<view class="">{{storegznum}}</view>
						<view class="">评价</view>
					</view>
				</view>
				<view class="business-bottom">
					<!-- <view class=""> -->
						<view class="gzbox flex align-center justify-center" 
						      v-if="collect==0" 
							  @click="collects" 
							  style="padding: 8px 30px;">
							<view class="flex align-end">
								<text class="f14 cuIcon-add text-red"></text>
								<text class="f12">关注</text>
							</view>
						</view>
						<view class="gzbox flex align-center justify-center bg-danger " 
						      v-else 
							  @click="collects" 
							  style="padding: 8px 30px;">
							<text class="text-white f12">已关注</text>
						</view>
					<!-- </view> -->
					<view class="content">私聊</view>
					<view class="content">分享</view>
				</view>
			</view>
			
			<view class="shop-tab mx10">
				<view v-for="(item, index) in titles" @click="titlesClick(index)" :key="item" :class="{active: currentIndex === index}" style="flex: 1;">{{item}}</view>
			</view>
			
			<view class="flex al-strar justify-between mx10">
				<scroll-view class="scroll-view rtfenlei leftwidth" scroll-y>
					<view class="flex align-center nochoice-box" @click="xuanze(item,index)" :class="{'choice-box':typeindex==index}" v-for="(item,index) in typename" :key="index">
						<image src="/static/class/tuijian.png" class="tuijian-pic" v-if="typeindex==index" mode=""></image>
						<view class="tuijian-pic" v-else></view>
						<view class="ml10">{{item.name}}</view>
					</view>
				</scroll-view>
				<view class="flex flex-direction rightwidth">
					<view class="discenter wp100" style="background: #EFEFEF;padding: 10px 0;">
						<view class="bs"></view>
						<view class="mx5">{{names}}</view>
						<view class="bs"></view>
					</view>
					<!-- <view class="flex align-center flex-wrap ">
						<view @click="pushPage('/pages/class/fenleilist?name='+item.name+'&id='+item.id)" v-for="(item,index) in fenleidata" class="wp33 mt25 flex flex-direction align-center" :key="index">
							<image :src="item.img" class="fenleipic" mode=""></image>
							<text class="mt15">{{item.name}}</text>
						</view>
					</view> -->
					
					<scroll-view scroll-y  style="height: calc(100vh - 708rpx);">
						<view class="shop-contentaa">
							<image src="/static/logo.png" mode=""></image>
							<view class="shop-info">
								<text class="shop-title">红酒</text>
								<view class="sales">
									<text>已售：0</text>
									<text>库存：0</text>
								</view>
								<view class="shop-price">
									<text class="price">￥{{160}}</text>
									<text class="cart">+</text>
								</view>
							</view>
						</view>
						<view class="shop-contentaa">
							<image src="/static/logo.png" mode=""></image>
							<view class="shop-info">
								<text class="shop-title">红酒</text>
								<view class="sales">
									<text>已售：0</text>
									<text>库存：0</text>
								</view>
								<view class="shop-price">
									<text class="price">￥{{160}}</text>
									<text class="cart">+</text>
								</view>
							</view>
						</view>
						<view class="shop-contentaa">
							<image src="/static/logo.png" mode=""></image>
							<view class="shop-info">
								<text class="shop-title">红酒</text>
								<view class="sales">
									<text>已售：0</text>
									<text>库存：0</text>
								</view>
								<view class="shop-price">
									<text class="price">￥{{160}}</text>
									<text class="cart">+</text>
								</view>
							</view>
						</view>
						<view class="shop-contentaa">
							<image src="/static/logo.png" mode=""></image>
							<view class="shop-info">
								<text class="shop-title">红酒</text>
								<view class="sales">
									<text>已售：0</text>
									<text>库存：0</text>
								</view>
								<view class="shop-price">
									<text class="price">￥{{160}}</text>
									<text class="cart">+</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- <view class=" bg-white flex flex-direction align-center pb20 mx15 mt30 por">
				<image :src="storepic" class="mt25 block50 round"></image>
				<text class="mt10 f18">{{storename}}</text>
				<view class="flex align-center f12 text-info mt15">
					<text>共{{storenum}}件商品</text>
					<text class="mx5">|</text>
					<text>{{storegznum}}人关注</text>
				</view>
				<view class="gzbox mt15 flex align-center justify-center" v-if="collect==0" @click="collects">
					<view class="flex align-end">
						<text class="f14 cuIcon-add text-red"></text>
						<text class="f12">关注</text>
					</view>
				</view>
				<view class="gzbox mt15 flex align-center justify-center bg-danger " v-else @click="collects">
					<text class="text-white f12">已关注</text>
				</view>
				<view class="store-line"></view>
				<view class="flex align-center justify-between px40 wp100 mt15">
					<view class="flex align-center">
						<image src="/static/order/addresss.png" class="shop-live"></image>
						<text class="ml8 maxaddress">{{address}}</text>
					</view>
				</view>
			</view> -->
		</view>
		
		<!-- notice -->
		<!-- <view class="flex align-center wp100 ovscolle mt10 bg-white" v-if="list.length!=0">
			<view class="flex align-center justify-between  pt15 bg-white">
				<view class="flex flex-direction align-center w160" v-for="(item,index) in list" :key="index" @click="choice(item,index)">
					<text class="f14 text-black" :class="{choice:index==classactive}">{{item.name}}</text>
					<view class="class-choice mt15" v-if="index==classactive"></view>
					<view class="class-nochoice mt15 bg-white" v-else></view>
				</view>
			</view>
		</view>
		<scroll-view class="scroll-view stores" scroll-y @scrolltolower="OnReachBottom">
			<view class="flex align-center flex-wrap px15 justify-between mb10">
				<view class="tuijian-box flex flex-direction mt15" @click="pushPage('/pages/goods/index?id='+item.id)"  v-for="(item,index) in goods" :key="index">
					<image :src="item.pic" class="tuijian-pic"></image>
					<view class="bg-white flex flex-direction px5 py10">
						<view class="f12 ellipsis2 mt5 bg-white ">{{ item.name }}</view>
						<text class="text-prices mt10">￥{{ item.money }}</text>
					</view>
				</view>
			</view>
		</scroll-view> -->
		
		
		<view class="bottom" style="">
			<view class="">
				<text>合计：</text>
				<text style="color: #ff0000;">100.00 元</text>
			</view>
			<view class="">
				<text class="content mr10">客服</text>
				<text class="content" @click="btnClick">去结算</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	data() {
		return {
			storepic:'',
			storename:'',
			storenum:0,
			storegznum:0,
			address:'',
			live:'',
			list:[],
			classactive:0,
			goods:[],
			collect:0,
			id:'',
			titles: ["商品", "评价", "商家简介"],
			currentIndex: 0,
			typeindex:0,
			typeid:'',
			names:'',
			fenleidata:[],
			typename: [],
		}
	},
	onLoad(e) {
		this.id=e.id
		
		this.getData()
	},
	onShow() {
		this.getData()
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		...mapActions(['setStoretype', 'getUser']),
		OnReachBottom(){
			this.getGoods()
		},
		async getData() {
			let {
				data:{store:{types,name,img,id,gzCount,goodCount,weizhi,isGz}}
			} = await this.$http.post('store.store', { storeId: this.id,lnt:this.userlnt,lat:this.userlat}, {tipConfig: { storeLoading: true } })
			this.list=types
			this.storepic=img
			this.storegznum=gzCount
			this.storenum=goodCount
			this.address=weizhi
			this.collect=isGz
			this.storename=name
			this.getGoods()
			
			// 下面分类
			let {
				data
			} = await this.$http.post('home.fenlei', {}, {tipConfig: { storeLoading: true, isSuccessTip: false }});
			this.typename=data
			this.names=this.typename[0].name
			this.typeid=this.typename[0].id
			this.getDatas()
		},
		async getGoods() {
			if (this.finish) return
			let {
				data:{goods}
			} = await this.$http.post('store.fenleigoods', { page: this.page,goodTypeId:this.list[this.classactive].id,storeId:this.id },{storeLoading: true})
			this.finish = goods.length < 20
			!this.finish && (this.page += 1)
			this.goods = [...this.goods, ...goods]
		},
		choice(item,index){
			this.classactive=index
			this.clearGoods()
			this.getGoods()
		},
		async collects() {
			await this.$http.post('store.collect', { storeId: this.id }, { tipConfig: {storeLoading: true, isSuccessTip: true  } })
			this.getData()
			// if(this.collect==0){
			// 	this.collect=1
			// }else{
			// 	this.collect=0
			// }
		},
		clearGoods(){
			this.finish=false
			this.page=1
			this.goods=[]
		},
		btnClick() {
			this.pushPage('/pages/class/jiesuanpay');
		},
		
		xuanze(item,index){
			this.typeid=item.id
			this.names=item.name;
			this.getDatas()
			this.typeindex=index;
		},
		// async getData() {
			
		// },
		async getDatas() {
			let {
				data
			} = await this.$http.post('home.fenleilist', {typeId:this.typeid}, {tipConfig: { storeLoading: true, isSuccessTip: false }});
			this.fenleidata=data
		},
		titlesClick(index) {
			this.currentIndex = index;
		}
	}
}
</script>

<style lang="less">
.block10{
	width: 20rpx;
	height: 20rpx;
}
.stross{
	position: fixed;
	z-index: 1;
	top: 0;
	width: 100%;
	height: calc(var(--status-bar-height) + 480rpx );
}
.search-box{
	width: calc(100% - 116rpx);
	margin-right: 30rpx;
	height: 66rpx;
	border-radius: 30rpx;
	background-color: #F6F6F6;
}
.por{
	position: relative;
	z-index: 5;
}
.choice{
	color: #FE4725;
}
.block75{
	width: 150rpx;
	height: 150rpx;
}
.shop-live{
	width: 30rpx;
	height: 35rpx;
}
.h75{
	height: 150rpx;
}
.tuijian-box{
	width: 320rpx;
}
.tuijian-pic {
	width: 320rpx;
	height: 320rpx;
}
.blcok-live{
	width: 130rpx;
	height: 50rpx;
	background-image: linear-gradient(to top, #FE4725, #FF8463) !important;
	border-radius: 10rpx;
}
.block-box{
	width: calc(100% - 170rpx);
}
.class-address{
	width: 26rpx;
	height: 27rpx;
}
.store-line{
	width: 620rpx;
	height: 1rpx;
	background-color: #EBEBEB;
	margin-top: 30rpx;
}
.gzbox{
	
	border-radius: 30rpx;
	border: 0.5px solid #FE4725;
	color: #FE4725;
}
.add-pic{
	width: 20rpx;
	height: 20rpx;
	margin-right: 4rpx;
}
.maxaddress{
	word-wrap: break-word;
	width: 380rpx;
}
.class-choice{
	width: 120rpx;
	height: 4rpx;
	background-color: #FE4725;
}
.class-nochoice{
	width: 120rpx;
	height: 4rpx;
	background-color: #FFFFFF;
}
.ovscolle{
	overflow-x: scroll;
}
.w160{
	width: 160rpx;
}
.goods-box{
	width: 336rpx;
}
.goods-pic{
	width: 336rpx;
	height: 336rpx;
}

.business-view {
	background: #de2e21;
	width: 100%;
	height: 100rpx;
	position: relative;
	margin-bottom: 264rpx;
	
	.business-content {
		padding: 24rpx;
		
		.business-info {
			display: flex;width: 100%;
			
			.business-image {
				border: 2rpx solid #ccc;
				overflow: hidden;
			}
			.text-info {
				flex: 1;
				justify-content: space-between;
				display: flex;
				margin: 8rpx 0 0 20rpx;
				flex-direction: column;
				
				.text-info-top {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				
				.text-info-bottom {
					.xing {
						color: #ff0000;
						font-size: 40rpx;
					}
				}
			}
		}
		
		.shop-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			margin-top: 36rpx;
			text-align: center;
		}
		
		.business-bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 36rpx;
			
			.content {
				padding: 12rpx 60rpx;
				border-radius: 15px;
				border: 1rpx solid #FE4725;
				color: #de2e21;
			}
		}
	}
}
.shop-tab {
	height: 80rpx;
	border-bottom: 2rpx solid rgba(0,0,0,0.1);
	border-top: 2rpx solid rgba(0,0,0,0.1);
	display: flex;
	align-items: center;
	text-align: center;
	background: #fff;
	font-weight: bold;
}

.bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
	border-top: 1px solid rgba(0,0,0,0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
	background: #fff;
	
	.content {
		padding: 12rpx 60rpx;
		border-radius: 15px;
		border: 1rpx solid #FE4725;
		color: #de2e21;
	}
}

.shop-contentaa {
	width: 100%;
	height: 180rpx;
	margin: 20rpx 0;
	padding: 0 36rpx;
	display: flex;
	justify-content: space-between;
	
	image {
		width: 180rpx;
		height: 180rpx;
	}
	
	.shop-info {
		margin-left: 20rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		.shop-title {
			font-size: 28rpx;
			font-weight: bold;
			height: 66rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		
		.sales {
			 display: flex;
			 justify-content: space-between;
		 }
		
		.shop-price {
			display: flex;
			justify-content: space-between;
			
			.price {
				color: #d73329;
				font-size: 18px
			}
			.cart {
				width: 40rpx;
				height: 40rpx;
				background: #d73329;
				color: #fff;
				text-align: center;
				border-radius: 50%;
				line-height: 40rpx;
			}
		}
	}
}

.mr10 {
	margin-right: 20rpx;
}

.nochoice-box{
	width: 200rpx;
	height: 70rpx;
	background-color: #F7F7F7;
}
.choice-box{
	width: 200rpx;
	height: 70rpx;
	background-color: #FFFFFF;
}
.tuijian-pic{
	width: 13rpx;
	height: 41rpx;
	margin-left: 14rpx;
}
.bs{
	width: 55rpx;
	height: 1rpx;
	background-color: #dfdfdf;
}
.leftwidth{
	width: 200rpx;
}
.rightwidth{
	width: calc(100% - 200rpx);
}
.fenleipic{
	width: 90rpx;
	height:90rpx;
}

.rtfenlei {
	height: calc(100vh - 640rpx);
}
.active {
	color: #de2e21;
}
.mx10 {
	margin: 0 20rpx;
}
</style>
